Angular-এ ViewChild এবং ContentChild ডেকোরেটর দুটি ব্যবহৃত হয় ডম (DOM) উপাদান বা চাইল্ড কম্পোনেন্টগুলির সাথে ইন্টারঅ্যাক্ট করার জন্য। এগুলি Angular এর ডায়নামিক ভিউ ম্যানিপুলেশন করতে ব্যবহৃত হয়, যেখানে আপনি এক কম্পোনেন্টের মধ্যে অন্য কম্পোনেন্ট বা DOM এলিমেন্টকে রেফারেন্স করতে পারেন। যদিও তাদের উদ্দেশ্য এক, তবে তারা আলাদা আলাদা কনটেক্সটে ব্যবহৃত হয়।
১. ViewChild
ViewChild ডেকোরেটরটি DOM বা চাইল্ড কম্পোনেন্টের প্রথম ইন্সট্যান্সকে রেফারেন্স করতে ব্যবহৃত হয়, যা কেবলমাত্র ভিউ (template)-এর মধ্যে রয়েছে। ViewChild ব্যবহৃত হলে, Angular ওই কম্পোনেন্টের প্রথম ইন্সট্যান্সকে আপনার ক্লাসে ইনজেক্ট করে দেয়, যাতে আপনি এটি ব্যবহার করতে পারেন।
ব্যবহার:
- DOM এলিমেন্টের সাথে কাজ করার জন্য
- চাইল্ড কম্পোনেন্ট বা ডিরেক্টিভের সাথে কাজ করার জন্য
- কেবলমাত্র কম্পোনেন্টের ভিউতে (template) থাকা উপাদানগুলির সাথে কাজ করার জন্য
উদাহরণ: ViewChild ব্যবহার
ধরা যাক, আমাদের একটি ChildComponent রয়েছে, যা AppComponent থেকে রেফারেন্স করা হবে।
ChildComponent (child.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-child',
template: '<p>Child Component</p>',
})
export class ChildComponent {}
AppComponent (app.component.ts)
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';
@Component({
selector: 'app-root',
template: `
<app-child></app-child>
`,
})
export class AppComponent implements AfterViewInit {
@ViewChild(ChildComponent) child: ChildComponent;
ngAfterViewInit() {
console.log(this.child); // এখানে আপনি child কম্পোনেন্টের প্রপার্টি বা মেথড অ্যাক্সেস করতে পারবেন
}
}
এখানে @ViewChild(ChildComponent) দ্বারা ChildComponent এর প্রথম ইনস্ট্যান্সকে child প্রপার্টি হিসেবে অ্যাক্সেস করা হচ্ছে। আপনি এটি ব্যবহার করে চাইল্ড কম্পোনেন্টের মেথড বা প্রপার্টি অ্যাক্সেস করতে পারবেন।
২. ContentChild
ContentChild ডেকোরেটরটি ব্যবহার করা হয় ng-content এলিমেন্টের মাধ্যমে প্রকৃত কন্টেন্ট (রিডেরেক্টেড কন্টেন্ট) থেকে উপাদান রেফারেন্স করার জন্য। এটি প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত কন্টেন্টের সাথে ইন্টারঅ্যাক্ট করতে ব্যবহৃত হয়। সাধারণত, ContentChild ng-content এর মধ্যে থাকা চাইল্ড কম্পোনেন্ট বা DOM এলিমেন্ট রেফারেন্স করতে ব্যবহৃত হয়।
ব্যবহার:
ng-contentএর মাধ্যমে ইনপুট ডেটা (content projection) পাওয়ার জন্য।- প্যারেন্ট কম্পোনেন্টের কাছে আসা কন্টেন্টের সাথে কাজ করার জন্য।
উদাহরণ: ContentChild ব্যবহার
ধরা যাক, আমরা একটি ParentComponent এবং একটি ChildComponent তৈরি করেছি, যেখানে ChildComponent একটি ng-content এলিমেন্ট ব্যবহার করবে, এবং ParentComponent সেই কন্টেন্ট পাস করবে।
ChildComponent (child.component.ts)
import { Component, ContentChild, AfterContentInit } from '@angular/core';
@Component({
selector: 'app-child',
template: `<div><ng-content></ng-content></div>`,
})
export class ChildComponent implements AfterContentInit {
@ContentChild('contentRef') content: any;
ngAfterContentInit() {
console.log(this.content); // কন্টেন্টের রেফারেন্স এখানে পাওয়া যাবে
}
}
ParentComponent (app.component.ts)
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-child>
<div #contentRef>Content from Parent Component</div>
</app-child>
`,
})
export class AppComponent {}
এখানে, ContentChild('contentRef') ডেকোরেটর ব্যবহার করে আমরা ng-content এর মধ্যে থাকা কন্টেন্টের রেফারেন্স পেয়েছি। #contentRef এর মাধ্যমে আমরা ParentComponent থেকে একটি DOM এলিমেন্ট ChildComponent-এ পাস করছি, এবং ContentChild ডেকোরেটর সেই কন্টেন্ট অ্যাক্সেস করছে।
পার্থক্য: ViewChild এবং ContentChild
| বৈশিষ্ট্য | ViewChild | ContentChild |
|---|---|---|
| ব্যবহার | ভিউ (template)-এ থাকা উপাদান/কম্পোনেন্টের জন্য | প্যারেন্ট কম্পোনেন্টে ng-content এর মাধ্যমে পাস হওয়া কন্টেন্টের জন্য |
| ডোমেন | ভিউ (template)-এ ডিফাইন করা উপাদানগুলির জন্য | কন্টেন্ট প্রজেকশন (content projection) এর মাধ্যমে পাস হওয়া উপাদান |
| ডেকোরেটর | @ViewChild | @ContentChild |
| অ্যাক্সেসযোগ্যতা | ভিউতে থাকা উপাদান বা চাইল্ড কম্পোনেন্টকে রেফারেন্স করা | ng-content এর মাধ্যমে ইনপুট করা উপাদান বা চাইল্ড কম্পোনেন্টকে রেফারেন্স করা |
উপসংহার
ViewChildব্যবহৃত হয় ডায়নামিক ভিউ ম্যানিপুলেশন এবং ভিউ-এ থাকা উপাদান/কম্পোনেন্টের সাথে কাজ করার জন্য।ContentChildব্যবহৃত হয় ng-content এর মাধ্যমে পাস হওয়া কন্টেন্টের সাথে কাজ করার জন্য। এটি সাধারণত প্যারেন্ট কম্পোনেন্ট থেকে ইনপুট কন্টেন্ট রেফারেন্স করার জন্য ব্যবহৃত হয়।
এই দুটি ডেকোরেটর আপনাকে Angular অ্যাপ্লিকেশনে আরও ডায়নামিক এবং মডুলার কাজ করতে সহায়তা করে।
Read more
